<template>
    <div class="user-container">
        <el-row :gutter="20">
            <el-col :span="12">

                <el-form ref="userField" :model="userField" :hide-required-asterisk="true" label-width="80px" size="small">
                    <el-form-item label="用户名" prop="loginName" :rules="$validate.validates({required:true,msg:'用户名不能为空'})">
                        <el-input v-model="userField.loginName" placeholder="输入用户名用于登录" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="登录密码" prop="pwd" :rules="$validate.validates({required:true,msg:'登录密码不能为空',type:'passWord'})">
                        <el-input v-model="userField.pwd" type="password" show-password placeholder="输入8-16位登录密码" minlength="8" maxlength="16"></el-input>
                    </el-form-item>
                    <el-form-item label="用户昵称" prop="nickName" :rules="$validate.validates({required:true,msg:'用户昵称不能为空'})">
                        <el-input v-model="userField.nickName" placeholder="输入用户在系统中使用的昵称" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码" prop="mobile" :rules="$validate.validates({required:true,msg:'手机号码不能为空',type:'mobile'})">
                        <el-input v-model="userField.mobile" placeholder="请输入手机号码" maxlength="11"></el-input>
                    </el-form-item>
<!--                    <el-form-item label="用户头像">-->
<!--                        <el-input v-model="userField.avatar" placeholder="请输入用户头像" :disabled="true"></el-input>-->
<!--                    </el-form-item>-->
                    <el-form-item label="用户角色" prop="roles" :rules="$validate.validates({required:true,msg:'用户角色不能为空'})">
                        <el-select v-model="userField.roles" multiple filterable placeholder="请选用户角色" style="width:100%">
                            <el-option
                                v-for="item in roles"
                                :key="item.id"
                                :label="item.roleName"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="用户类型" prop="type" v-if="$store.getters.type == 1 || $store.getters.type == 2" :rules="$validate.validates({required:true,msg:'用户类型不能为空'})">
                        <el-radio-group v-model="userField.type" size="mini">
                            <el-radio-button :label="1" v-if="$store.getters.type == 1">系统管理员</el-radio-button>
                            <el-radio-button :label="2" v-if="$store.getters.type == 1">物业管理员</el-radio-button>
                            <el-radio-button :label="3" v-if="$store.getters.type == 2">小区管理员</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="物业企业" prop="orgId" :rules="$validate.validates({required:true,msg:'物业企业不能为空'})" v-if="userField.type == 2">
                        <ed-tree v-model="userField.orgId" apiUrl="/system/org/queryAll" :treeProps="treeProps" :treeForm="treeForm" :setObj="setObj" @onclick="onclick"></ed-tree>
                    </el-form-item>
                    <el-form-item label="物业小区" prop="orgId" v-if="$store.getters.type == 2" :rules="$validate.validates({required:true,msg:'物业小区不能为空'})">
                        <el-select v-model="userField.orgId" filterable placeholder="请选物业小区" style="width:100%">
                            <el-option
                                    v-for="item in villageList"
                                    :key="item.orgId"
                                    :label="item.orgName"
                                    :value="item.orgId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('userField')" :loading="disabled" >创建用户</el-button>
                        <el-button @click="$utilsSet.goBack($router)">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="12">

            </el-col>
        </el-row>
    </div>
</template>

<script>
import {createUser ,getAvailableRoles ,getQueryVillage} from "src/api/permission"
import EdTree from "../../../components/EdTree.vue";

export default {
    name: "UserCreate",
    components:{
        EdTree
    },
    data() {
        return {
            userField: {
                loginName: "",
                pwd: "",
                mobile: "",
                nickName: "",
                avatar: "",
                type: 1,
                status: 1,
                orgId:"",
                roles: []
            },
            roles: [],
            company: [],
            disabled: false,
            treeForm:{
                placeholder:"请选择物业企业"
            },
            treeProps:{
                parentId: 'parentId',   // 父级唯一标识
                value: 'id',          // 唯一标识
                label: 'orgName',
                children: 'children',
            },
            setObj:{},
            villageList:[]
        }
    },
    created() {
        this.getAvailableRoles();
        if(this.$store.getters.type == 2){
            this.userField.type = 3;
            this.getQueryVillage();
        }
    },
    methods: {
        onclick(node){
            this.userField.orgId = node.orgId
        },
        // 用户角色
        getAvailableRoles() {
            getAvailableRoles().then(response => {
                this.roles = response.data
            })
        },
        // 获取小区
        getQueryVillage() {
            getQueryVillage().then(response => {
                this.villageList = response.data
            })
        },
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.disabled = true;
                    window.setTimeout(() => {
                        this.disabled = false
                    }, 2000);

                    let param = {};
                    Object.assign(param, this.userField);
                    let roleParamArr = [];
                    param.roles.forEach(item => {
                        roleParamArr.push({id: item})
                    });
                    param.roles = roleParamArr;
                    createUser(param).then(response => {
                        if(response.code == 20000) {
                            this.$message.success({
                                message: '已成功添加用户数据 即将返回用户列表',
                                duration: 2000,
                                center:true
                            });
                            window.setTimeout(() => {
                                this.$utilsSet.goBack(this.$router);
                            }, 600)
                        }
                    });
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.user {
    &-container {
        margin: 30px;
    }
}
</style>
